<template>
  <el-form :model="model" ref="paymentForm"  :rules="dwForm"label-width="72px" :label-position="'left'" >
    <el-row class="search-title">条件搜索</el-row>
    <el-row>
    <el-form-item prop="orgno" label="选择单位" :inline="false">
      <el-checkbox-group  v-model="model.orgno" placeholder="补缴方式">
        <el-checkbox  v-for="item in dws" :label="item.orgno" :key="item.orgno">{{item.orgname}}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    </el-row>
    <el-row>
      <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
    <el-form-item prop="rangeTime" label="时间范围">
      <el-date-picker
        v-model="model.rangeTime" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
        :picker-options="pickerOptions" clearable format="yyyy 年MM 月dd 日" value-format="yyyy-MM-dd">
      </el-date-picker>
    </el-form-item>
      </el-col>
      <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" style="margin-left: 10px">
      <el-form-item> <el-button class="btn-search" type="primary"  @click="handleQueryPayment">搜索</el-button></el-form-item>
      </el-col>
    </el-row>
    <!--<el-form-item>-->
      <!--<el-button class="filter-item" style="margin-left: 10px;" @click="handleQueryPayment" type="primary"-->
                 <!--icon="el-icon-search">查询-->
      <!--</el-button>-->
      <!--<el-button class="filter-item" style="margin-left: 10px;" @click="handleResetPayment" type="danger"-->
                 <!--icon="el-icon-refresh">重置-->
      <!--</el-button>-->
    <!--</el-form-item>-->
  </el-form>
</template>

<script>
  /* eslint-disable */
  import ElFormItem from "element-ui/packages/form/src/form-item";
  import ElButton from "element-ui/packages/button/src/button";
  import {getDwList} from "../../../api/public/searchUnit";

  export default {
    components: {
      ElButton,
      ElFormItem},
    name: 'payment-form',
    created(){
      this.getDws()},
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        model: {
          rangeTime: [new Date(), new Date()],
          orgno: []
        },
        dwForm:{
          orgno: [{required: true, message: '请选择单位', trigger: 'change'}],
        },
        dws:[
          ]
      }
    },
    methods: {
      handleQueryPayment(){
        this.$refs['paymentForm'].validate((valid) => {
          if (valid) {
            this.$emit('handleQueryPayment',this.model)
          }
        })
      },
      handleResetPayment(){
        this.$refs['paymentForm'].resetFields()
      },
      getDws(){
        getDwList().then(res=>{
          this.dws=res
        })
      }
    }
  }
</script>

<style scoped>
</style>
